<template>
  <div>
    left111
    <p v-color="color1">hello world</p>
    <button @click="color1 = 'blue'">change</button>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      color1: "pink",
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
  directives: {
    // color(el, obj) {
    //   console.log(el);
    //   console.log(obj);
    //   el.style.color = obj.value;
    // },
    color: {
      // 页面DOM渲染后，使用 v-color 指令的元素会调用一次bind函数
      beforeMount(el, obj) {
        console.log(el);
        console.log(obj);
        // el 是使用 v-color 指令的DOM元素
        // obj 对象的 value 属性，就是传递的 pink 参数
        el.style.color = obj.value;
      },
      inserted(el, obj) {
        console.log(el);
        console.log(obj);
        el.style.color = obj.value;
      },
      update(el, obj) {
        console.log(el);
        console.log(obj);
        el.style.color = obj.value;
      },
      componentUpdated(el, obj) {
        console.log(el);
        console.log(obj);
        el.style.color = obj.value;
      },
      unbind(el, obj) {
        console.log(el);
        console.log(obj);
        el.style.color = obj.value;
      },
    },
  },
};
</script>
<style scoped lang="less"></style>
